import React, { useEffect } from 'react';
import { Text, View, Image, publishDps } from '@ray-js/ray';
import Strings from '@/i18n';
import { Toast, Notify, NotifyInstance, ToastInstance } from '@ray-js/smart-ui';
import { useProps } from '@ray-js/panel-sdk';
import { NavBarCustom } from '@/components/NavBarCustom';
import { WeatherBox } from '@/components/weatherBox';
import { AreaAndSwitch } from '@/components/areaAndSwitch';

// @ts-ignore
import { BotBar } from '@/components/bot-bar';

import { GroupInfo } from '@/components/groupInfo';
import styles from './index.module.less';
import { useFault } from '@/hooks/useFault';

const getTimeMeasureUtils = (time: {
  hour: number;
  minute: number;
  duration?: number;
  status?: boolean;
}) => {
  if (time.hour === undefined) {
    return '';
  }

  const { hour, minute } = time;

  return `${hour < 10 ? `0${hour}` : hour}:${minute < 10 ? `0${minute}` : minute}`;
};

export function Home() {
  const { smart_switch: isWeather } = useProps();

  useFault();

  const renderDelayTips = () => {
    return (
      <View className={styles.tip}>
        <Text>{Strings.getLang('smart_open')}</Text>
      </View>
    );
  };

  useEffect(() => {
    const timer = setInterval(() => {
      publishDps({
        online_state: 'online',
      });
    }, 60 * 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <View className={styles.view}>
      <NavBarCustom />
      <WeatherBox />
      {isWeather ? renderDelayTips() : null}
      <AreaAndSwitch />

      <GroupInfo />

      <BotBar />
      <Notify id="smart-notify" top={'200rpx'} />
      <Toast id="smart-toast" />
    </View>
  );
}

export default Home;
